<template>
  <div style="font-size: 0.3rem; padding-left: 0.2rem;height: 17rem;">
    <p
      style="
        text-align: center;
        height: 1rem;
        background: #fff;
        line-height: 1rem;
        position: sticky;
        top: 0;
        z-index: 99999999;
      "
    >
      <span @click="out" style="float: left; margin-left: 0.2rem"><</span
      >图片咨询
    </p>
    <van-notice-bar
      wrapable
      :scrollable="false"
      text="急重症患者不适合网上诊疗咨询，请前往医院就诊"
    />
    <div
      class="boxone"
      v-for="(item, index) in list"
      key="index"
    >
      <div class="img">
        <img
          src="https://u.miaoshoucdn.com/avatar/003/64/27/003642720_mid.jpg"
          alt=""
        />
      </div>
      <div class="detail">
        <div class="nameone">
          <p>
            <b style="font-size: 0.36rem">{{ item.doctorname }}</b>
            {{ item.doctorstate }}
          </p>
          <span style="color: #c1c1c1"
            >东莞市第八人民医院(东莞市儿童医院) 妇科</span
          >
        </div>
      </div>
    </div>
    <div style="clear: both">
      <p style="margin-top: 0.5rem">
        <span
          style="
            font-size: 0.45rem;
            display: inline-block;
            margin-top: 0.5rem;
            margin-left: 0.2rem;
            float: left;
          "
          >请填写病情描述</span
        >
        <span
          style="
            float: right;
            display: inline-block;
            margin-top: 0.6rem;
            color: blue;
            margin-right: 0.2rem;
          "
          >导入历史病情</span
        >
      </p>
      <p style="margin-left: 0.2rem">
        <textarea
          name=""
          id=""
          cols="33"
          rows="10"
          style="margin-top: 0.2rem; font-size: 0.4rem; color: #c1c1c1"
          v-model="textareaValue"
          placeholder="请详细描述咨询人当前的病情状况、最近医院就医用药情况以及需要医生解答的问题，
          如有检查资料请确保清晰可见后上传，以便医生能更全面了解病况并提供专业的知道意见。问题提交后无法修补或补充信息"
        ></textarea>
      </p>
      <van-field
        v-model="fieldValue"
        is-link
        readonly
        label="科室"
        placeholder="请选择"
        @click="show = true"
      />
      <van-popup v-model:show="show" round position="bottom">
        <van-cascader
          v-model="cascaderValue"
          title="请选择科室"
          :options="options"
          @close="show = false"
          @finish="onFinish"
        />
      </van-popup>
      <p style="margin-top: -0.1rem">
        <span
          style="
            font-size: 0.38rem;
            display: inline-block;
            margin-top: 0.5rem;
            margin-left: 0.2rem;
            float: left;
          "
          >请上传体检报告或患处照片</span
        >
        <span
          style="
            float: right;
            display: inline-block;
            margin-top: 0.5rem;
            color: blue;
            margin-right: 0.2rem;
          "
          >导入历史病情</span
        >
      </p>
      <br /><br />
      <p style="width: 100%; margin-left: 0.2rem; color: #c1c1c1">
        照片仅自己和医生可见（最多9张）
      </p>
      <!-- 限制上传数量 -->
      <van-uploader
        v-model="fileList"
        multiple
        :max-count="9"
        :after-read="afterRead"
      />
    </div>
    <p>
      <button
        style="
          width: 96%;
          height: 1rem;
          text-align: center;
          line-height: 1rem;
          background: #0099ff;
          color: #fff;
          border: none;
          margin-top: 1rem;
          border-radius: 0.2rem;
        "
        @click="xia"
      >
        下一步
      </button>
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { showToast } from 'vant';
import { useRouter } from 'vue-router'
import { doctorPictures } from '../../../api/index'
const router = useRouter()
const out = () => {
  router.push('/wys')
}

// 点击进行下一步
const textareaValue = ref('')
const xia = () => {
  if (textareaValue.value.length <= 4 ) {
    showToast('病情描述最少5个字');
  }
  else{
    router.push('/tu')
  }
}

// 上传
const fileList = ref([])
// 上传状态
const afterRead = file => {
  file.status = 'uploading'
  file.message = '上传中...'

  setTimeout(() => {
    file.status = 'uploaded'
    file.message = '上传成功'
  }, 1000)
}

const show = ref(false)
const fieldValue = ref('')
const cascaderValue = ref('')
// 选项列表，children 代表子选项，支持多级嵌套
const options = [
  {
    text: '全部',
    children: [{ text: '全部科室', id: 1 }],
  },
  {
    text: '内科',
    children: [
      { text: '呼吸内科', id: 2 },
      { text: '消化内科', id: 3 },
      { text: '神经内科', id: 4 },
      { text: '内分泌科', id: 5 },
      { text: '心血管内科', id: 6 },
      { text: '风湿免疫科', id: 7 },
      { text: '血液内科', id: 8 },
      { text: '肾内科', id: 9 },
      { text: '感染内科', id: 10 },
      { text: '老年病科', id: 11 },
      { text: '普通内科', id: 12 },
      { text: '高压氧科', id: 13 },
      { text: '过敏反应科', id: 14 },
    ],
  },
  {
    text: '外科',
    children: [
      { text: '普通外科', id: 15 },
      { text: '泌尿外科', id: 16 },
      { text: '胸外科', id: 17 },
      { text: '心血管外科', id: 18 },
      { text: '神经外科', id: 19 },
      { text: '胃肠外科', id: 20 },
      { text: '肝胆外科', id: 21 },
      { text: '肛肠外科', id: 22 },
      { text: '烧伤科', id: 23 },
      { text: '器官移植', id: 24 },
      { text: '血管外科', id: 25 },
      { text: '甲状腺外科', id: 26 },
      { text: '乳腺外科', id: 27 },
      { text: '介入医学科', id: 28 },
    ],
  },
  {
    text: '妇产科',
    children: [
      { text: '妇产科', id: 29 },
      { text: '产科', id: 30 },
      { text: '妇科', id: 31 },
      { text: '计划生育科', id: 32 },
      { text: '生殖医学科', id: 33 },
      { text: '遗传咨询科', id: 34 },
      { text: '妇科内分泌', id: 35 },
      { text: '妇科肿瘤', id: 36 },
      { text: '产前检查科', id: 37 },
    ],
  },
  {
    text: '儿科',
    children: [
      { text: '新生儿科', id: 38 },
      { text: '新生儿外科', id: 39 },
      { text: '小儿内科', id: 40 },
      { text: '小儿呼吸科', id: 41 },
      { text: '小儿消化科', id: 42 },
      { text: '小儿心内科', id: 43 },
      { text: '小儿肾内科', id: 44 },
      { text: '小儿神经内科', id: 45 },
      { text: '小儿泌尿外科', id: 46 },
      { text: '小儿血液科', id: 47 },
      { text: '小儿内分泌科', id: 48 },
      { text: '小儿风湿免疫科', id: 49 },
      { text: '小儿外科', id: 50 },
      { text: '小儿康复科', id: 51 },
      { text: '小儿皮肤科', id: 52 },
      { text: '小儿耳鼻喉科', id: 53 },
      { text: '小儿眼科', id: 54 },
      { text: '小儿口腔科', id: 55 },
      { text: '儿童保健科', id: 56 },
      { text: '小儿急救科', id: 57 },
      { text: '小儿整形科', id: 58 },
      { text: '小儿骨科', id: 59 },
      { text: '小儿神经外科', id: 60 },
      { text: '小儿胸外科', id: 61 },
      { text: '小儿心外科', id: 62 },
      { text: '小二普外科', id: 63 },
      { text: '小儿妇科', id: 64 },
      { text: '小儿精神科', id: 65 },
      { text: '小儿皮肤科', id: 66 },
      { text: '小儿感染科', id: 67 },
      { text: '小儿血液内科', id: 68 },
    ],
  },
  {
    text: '眼科',
    children: [
      { text: '眼底科', id: 69 },
      { text: '白内障科', id: 70 },
      { text: '角膜科', id: 71 },
      { text: '青光眼科', id: 72 },
      { text: '眼外伤科', id: 73 },
      { text: '小儿眼科', id: 74 },
      { text: '眼视光学科', id: 75 },
      { text: '眼眶及眼肿瘤科', id: 76 },
      { text: '眼整形科', id: 77 },
    ],
  },
  {
    text: '口腔科',
    children: [
      { text: '口腔预防科', id: 78 },
      { text: '口腔正畸科', id: 79 },
      { text: '口腔修复科', id: 80 },
      { text: '口腔黏膜科', id: 81 },
      { text: '牙体牙植科', id: 82 },
      { text: '牙周科', id: 83 },
      { text: '种植科', id: 84 },
      { text: '种植科', id: 85 },
      { text: '颌面外科', id: 86 },
      { text: '儿童口腔科', id: 87 },
    ],
  },
  {
    text: '耳鼻咽喉头颈科',
    children: [
      { text: '耳鼻喉科', id: 88 },
      { text: '头颈外科', id: 89 },
      { text: '耳科', id: 90 },
      { text: '鼻科', id: 91 },
      { text: '喉科', id: 92 },
    ],
  },
  {
    text: '肿瘤科',
    children: [
      { text: '肿瘤内科', id: 93 },
      { text: '肿瘤外科', id: 94 },
      { text: '放疗科', id: 95 },
    ],
  },
  {
    text: '皮肤性病科',
    children: [
      { text: '皮肤科', id: 96 },
      { text: '性病科', id: 97 },
    ],
  },
  {
    text: '中医科',
    chil: [
      { text: '中医科', id: 98 },
      { text: '中医妇产科', id: 99 },
      { text: '中医儿科', id: 100 },
      { text: '中医内分泌科', id: 101 },
      { text: '中医消化科', id: 102 },
      { text: '中医呼吸科', id: 103 },
      { text: '中医肾病科', id: 104 },
      { text: '中医免疫内科', id: 105 },
      { text: '中医心内科', id: 106 },
      { text: '中医血液科', id: 107 },
      { text: '中医神经内科', id: 108 },
      { text: '中医肝病科', id: 109 },
      { text: '中医感染内科', id: 110 },
      { text: '中医肿瘤科', id: 111 },
      { text: '中医皮肤科', id: 112 },
      { text: '中医男科', id: 113 },
      { text: '中医外科', id: 114 },
      { text: '中医骨科', id: 115 },
      { text: '中医乳腺外科', id: 116 },
      { text: '中医肛肠科', id: 117 },
      { text: '中医精神科', id: 118 },
      { text: '中医眼科', id: 119 },
      { text: '中医耳鼻咽喉科', id: 120 },
      { text: '中医按摩科', id: 121 },
      { text: '针灸科', id: 122 },
    ],
  },
  {
    text: '中西医结合科',
    children: [{ texxt: '中西医结合科', id: 123 }],
  },
  {
    text: '医学影像和放射治疗科',
    children: [
      { text: '超声医学科', id: 124 },
      { text: '放射科', id: 125 },
      { text: '核医学科', id: 126 },
    ],
  },
  {
    text: '全科',
    children: [{ text: '全科医学科', id: 127 }],
  },
  {
    text: '预防保健科',
    children: [{ text: '预防保健科', id: 128 }],
  },
]
// 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }) => {
  show.value = false
  fieldValue.value = selectedOptions.map(option => option.text).join('/')
}

//定义数据类型
interface DoctorData {
  doctorname: string
  doctorstate: string
  doctordescword: string
  doctorgood: number
  doctortime: number
  doctorbrowse: number
  doctorprice: number
}

const list = ref<DoctorData[]>([]) //定义一个数组，用来存储接口返回的数据
const doctordata = async () => {
  //调用接口
  await doctorPictures()
    .then(res => {
      list.value = res.data.data.slice(0, 1) //截取数组的前两条数据
    })
    .catch(error => {
      // 处理 AxiosError
      console.error('Axios请求出错:')
    })
}
doctordata()
</script>

<style>
.img {
  float: left;
  width: 1.5rem;
  height: 100%;
  /* background: green; */
  text-align: center;

  img {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    /* margin-top: 0.4rem; */
  }
}

.detail {
  float: left;
  width: calc(100% - 1.5rem);
  /* height: 4rem; */
  /* background: green; */
}

.nameone {
  width: 100%;
  height: 1rem;

  /* background: red; */
}
</style>
